<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

    "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>

        <title><?php print $head_title ?></title>

        <?php print $head ?>

        <?php print $styles ?>

        <?php print $scripts ?>

        <script src="<?php print $path; ?>/js/jquery.tools.min.js"></script>

        <script src="<?php print $path; ?>/js/jquery.nivo.slider.pack.js"></script>

        <script src="<?php print $path; ?>/js/delay.js"></script>

        <link rel="stylesheet" type="text/css" href="<?php print $path; ?>/css/tabs.css" />



        <style type="text/css" media="screen">

            <!--





            .infiniteCarousel {

                width: 676px;

                position: relative;



            }



            .infiniteCarousel .wrapper {

                width: 548px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */

                overflow: auto;

                min-height: 10em;

                margin: 0 40px;

                position: relative;

                top: 10px;

                left: 23px;

            }



            .infiniteCarousel ul a img {

                border: 0px solid #000;

                /*-moz-border-radius: 5px;

                -webkit-border-radius: 5px;

                */

            }



            .infiniteCarousel .wrapper ul {

                width: 9999px;

                list-style-image:none;

                list-style-position:outside;

                list-style-type:none;

                margin:0;

                padding:0;

                position: absolute;

                top: 0;

            }



            .infiniteCarousel ul li {

                display:block;

                float:left;

                padding: 12px 7px 0px 18px;

                height: 85px;

                width: 85px;

            }



            .infiniteCarousel ul li a img {

                display:block;

            }



            .infiniteCarousel .arrow {

                display: block;

                height: 36px;

                width: 37px;

                background: url(<?php print $path; ?>/images/arrow.png) no-repeat 0 0;

                text-indent: -999px;

                position: absolute;

                top: 37px;

                cursor: pointer;

            }



            .infiniteCarousel .forward {

                background-position: 0 0;

                right: 0;

            }



            .infiniteCarousel .back {

                background-position: 0 -72px;

                left: 10px;

                position: absolute;

            }



            .infiniteCarousel .forward:hover {

                background-position: 0 -36px;

            }



            .infiniteCarousel .back:hover {

                background-position: 0 -108px;

            }







            -->

        </style>









        <script type="text/javascript">



            $.fn.infiniteCarousel = function () {



                function repeat(str, num) {

                    return new Array( num + 1 ).join( str );

                }



                return this.each(function () {

                    var $wrapper = $('> div', this).css('overflow', 'hidden'),

                    $slider = $wrapper.find('> ul'),

                    $items = $slider.find('> li'),

                    $single = $items.filter(':first'),



                    singleWidth = $single.outerWidth(),

                    visible = Math.ceil($wrapper.innerWidth() / singleWidth), // note: doesn't include padding or border

                    currentPage = 1,

                    pages = Math.ceil($items.length / visible);





                    // 1. Pad so that 'visible' number will always be seen, otherwise create empty items

                    if (($items.length % visible) != 0) {

                        $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));

                        $items = $slider.find('> li');

                    }



                    // 2. Top and tail the list with 'visible' number of items, top has the last section, and tail has the first

                    $items.filter(':first').before($items.slice(- visible).clone().addClass('cloned'));

                    $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));

                    $items = $slider.find('> li'); // reselect



                    // 3. Set the left position to the first 'real' item

                    $wrapper.scrollLeft(singleWidth * visible);



                    // 4. paging function

                    function gotoPage(page) {

                        var dir = page < currentPage ? -1 : 1,

                        n = Math.abs(currentPage - page),

                        left = singleWidth * dir * visible * n;



                        $wrapper.filter(':not(:animated)').animate({

                            scrollLeft : '+=' + left

                        }, 400, function () {

                            if (page == 0) {

                                $wrapper.scrollLeft(singleWidth * visible * pages);

                                page = pages;

                            } else if (page > pages) {

                                $wrapper.scrollLeft(singleWidth * visible);

                                // reset back to start position

                                page = 1;

                            }



                            currentPage = page;

                        });



                        return false;

                    }



                    $wrapper.after('<a class="arrow back">&lt;</a><a class="arrow forward">&gt;</a>');



                    // 5. Bind to the forward and back buttons

                    $('a.back', this).click(function () {

                        return gotoPage(currentPage - 1);

                    });



                    $('a.forward', this).click(function () {

                        return gotoPage(currentPage + 1);

                    });



                    // create a public interface to move to a specific page

                    $(this).bind('goto', function (event, page) {

                        gotoPage(page);

                    });

                });

            };



            $(document).ready(function () {

                $('.infiniteCarousel').infiniteCarousel();

            });

        </script>

    </head>

    <body>

        <div id="background">

            <div id="main-container">

                <div id="header">

                    <div id="menu-top">

                        <ul id="navlist">

                            <li id="active"><a href="/" id="current">HOME</a></li>

                            <li><a href="/aboutus">ABOUT US</a></li>

                            <li><a href="/contactus">CONTACT US</a></li>

                        </ul>

                    </div>

                    <div id="mast-head">

                        <a href="/" class="logo"></a>

                        <div id="social-network-icons">

                            <a href="#"><img src="<?php print $path; ?>/images/facebook.png"></a>

                            <a href="#"><img src="<?php print $path; ?>/images/twitter.png"></a>

                        </div>

                        <div id="search-box">

                            <form action="<?php print base_path(); ?>search/luceneapi_node/" method="get">

                                <input name="keys" type="text" class="search-textbox" value="<?php echo $_REQUEST['keys'] ?>">

                                <input name="submit" type="submit" class="search-button">

                            </form>

                        </div>

                    </div>



                    <!-- sticker wrapper -->

                    <div id="nav-area">

                       

                        <div class="sticker_wrapper">

                            <div class="navBtn"><a href="/" class="home"></a> </div>

                        </div>

                        <div class="sticker_wrapper">

                            <div onmouseover="openTab(this, 'navButtonSports');" onmouseout="closeTab(this);">

                                <ul>

                                    <li>

                                        <div class="navBtn navButtonSports"><a class="buy"></a></div>

                                        <div class="sticker_menu" style="display: none; ">

                                            <div class="sticker_menu_inner">

                                                <div class="m-head"><a href="/buy" title="">Shop All Cars</a></div>



                                                <?php foreach ($cars as $key => $value) : ?>



                                                <?php if (($key % 2) == 0) : ?>



                                                <?php if ($key == 0) : ?> <div class="dd_column_f di-right-1">

                                                    <?php else : ?> <div class="dd_column di-right-1">

                                                    <?php endif; ?>

                                                                    <span class="m-title"><?php print $value['parent']; ?></span>

                                                        <?php foreach ($value['children'] as $children) : ?>

                                                                    <div class="m-item"><a href="/search/luceneapi_node/?keys=<?php print $children ?>" title="<?php print $children ?>"><?php print $children ?></a></div>

                                                        <?php endforeach; ?>

                                                        <?php else : ?>

                                                                        <hr>

                                                                        <span class="m-title"><?php print $value['parent']; ?></span>

                                                        <?php foreach ($value['children'] as $children) : ?>

                                                                            <div class="m-item"><a href="/search/luceneapi_node/?keys=<?php print $children ?>" title="<?php print $children ?>"><?php print $children ?></a></div>

                                                        <?php endforeach; ?>

                                                                        </div>

                                                    <?php endif; ?>



                                                    <?php endforeach; ?>

                                                                        </div>

                                                                        <!--<div class="dd-end-column">

                                                                            <div class="dd-right dd-right-1">&nbsp;</div>

                                                                        </div>-->

                                                                        <!--<div class="dd-bottom-left">&nbsp;</div>

                                                                        <div class="dd-bottom">&nbsp;</div>

                                                                        <div class="dd-bottom-right">&nbsp;</div>-->

                                                                    </div>



                                                            </li>



                                                        </ul>



                                                    </div>

                                                </div>

                                                <div class="sticker_wrapper">

                                                    <div class="navBtn"><a href="/" class="trade-in"></a> </div>

                                                </div>

                                                <div class="sticker_wrapper">

                                                    <div class="navBtn"><a href="/" class="financing"></a> </div>

                                                </div>

                                                <div class="sticker_wrapper">

                                                    <div class="navBtn"><a href="/" class="services"></a> </div>

                                                </div>

                                            </div>

               

                                            <!-- end of sticker wrapper -->

                                        </div>



                                        <div id="clear-both"></div>



                                        <!-- content -->

                                        <div id="content">

                                       <div id="breadcrumbs"><!--breadcrumbs area <img src="<?php print $path; ?>/images/red_arrow.png">--></div>

                                            <div id="content-left">

                                                <div id="content-top-left">

                                                    <div id="slider" class="nivoSlider">

                                <?php for ($i = 1; $i < 6; $i++) : ?>

                                                                                <a href="<?php print $slides['content_' . $i . '_path'] ?>"><img src="<?php print $slides['image_' . $i] ?>" alt="" rel="<?php print $slides['image_' . $i . '_thumb'] ?>" /></a>

                                <?php endfor; ?>



                                                                            </div>





                                                                        </div>

                                                                        <div id="content-middle-left">

                                                                            <div id="car-emblem">

                                                                                <img src="<?php print $path; ?>/images/car_emblem_header.png" border="0">



                                                                                <script language="JavaScript" type="text/JavaScript">

                                                                                    <!--



                                                                                    function MM_swapImgRestore() { //v3.0

                                                                                        var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

                                                                                    }



                                                                                    function MM_preloadImages() { //v3.0

                                                                                        var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

                                                                                            var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

                                                                                                if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

                                                                                        }



                                                                                        function MM_findObj(n, d) { //v4.01

                                                                                            var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

                                                                                                d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

                                                                                            if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

                                                                                            for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

                                                                                            if(!x && d.getElementById) x=d.getElementById(n); return x;

                                                                                        }



                                                                                        function MM_swapImage() { //v3.0

                                                                                            var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

                                                                                            if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

                                                                                        }



                                                                                        //-->



                                                                                        $(function() {

                                                                                            $("#emblem img")

                                                                                            .mouseover(function() {



                                                                                                var src = $(this).attr("src").match(/[^\.]+/) + "_ovr.png";

                                                                                                $(this).attr("src", src);

                                                                                            })

                                                                                            .mouseout(function() {

                                                                                                var src = $(this).attr("src").substr(0, $(this).attr("src").length - 8) + ".png";

                                                                                                $(this).attr("src", src);

                                                                                            });

                                                                                        });

                                                                                </script>



                                                                                <!--

                                                                                <div id="car-logo">

                                                                                <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','<?php print $path; ?>/images/car_emblem/honda_ovr.png',1)"><img src="<?php print $path; ?>/images/car_emblem/honda.png" name="Image1" width="72" height="72" border="0"></a>

                                                                                <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','<?php print $path; ?>/images/car_emblem/mitsubishi_ovr.png',1)"><img src="<?php print $path; ?>/images/car_emblem/mitsubishi.png" name="Image2" width="72" height="72" border="0"></a>

                                                                                <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','<?php print $path; ?>/images/car_emblem/suzuki_ovr.png',1)"><img src="<?php print $path; ?>/images/car_emblem/suzuki.png" name="Image3" width="72" height="72" border="0"></a>

                                                                                <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','<?php print $path; ?>/images/car_emblem/toyota_ovr.png',1)"><img src="<?php print $path; ?>/images/car_emblem/toyota.png" name="Image4" width="72" height="72" border="0"></a>

                                                                                <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','<?php print $path; ?>/images/car_emblem/volkswagen_ovr.png',1)"><img src="<?php print $path; ?>/images/car_emblem/volkswagen.png" name="Image5" width="72" height="72" border="0"></a>

                                                                                <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','<?php print $path; ?>/images/car_emblem/isuzu_ovr.png',1)"><img src="<?php print $path; ?>/images/car_emblem/isuzu.png" name="Image6" width="72" height="72" border="0"></a>



                                                                                                                                                                </div>

                                                                                -->





                                                                                <div class="infiniteCarousel">



                                                                                    <div class="wrapper" id="emblem">

                                                                                        <ul>



                                            <?php foreach ($cars as $key => $value) : ?>



                                                                                    <li><a href="/search/luceneapi_node/?keys=<?php print strtolower($value["parent"]) ?>" ><img src="<?php print $path; ?>/images/car_emblem/<?php print strtolower($value["parent"]) ?>.png" width="72" height="72" border="0" title="<?php print strtolower($value["parent"]) ?>"></a></li>

                                            <?php endforeach; ?>



                                                                                </ul>

                                                                            </div>

                                                                        </div>





                                                                    </div>

                                                                    <img src="<?php print $path; ?>/images/car_emblem_footer.png" border="0">

                                                                </div>

                                                                <div id="clear-both"></div>

                                                                <div id="content-bottom-left">

                                                                    <ul class="tabs">

                                                                        <li><a href="#">FEATURED</a></li>

                                                                        <li><a href="#">NEW ARRIVALS</a></li>

                                                                    </ul>

                                                                    <img src="<?php print $path; ?>/images/new_arrivals_header.png" border="0">



                                                                    <div class="panes">



                                                                        <!-- FEATURED -->

                                                                        <div>

                                                                            <div class="infiniteCarousel">



                                                                                <div class="wrapper">

                                                                                    <ul>



                                                <?php foreach ($featured as $result) : ?>

                                                                                        <li><a href="<?php print $result['title_path'] ?>"><img src="<?php print $result['image'] ?>" width="87" height="66" class="rounded" title="<?php print $result['title'] ?>"></a></li>

                                                <?php endforeach; ?>



                                                                                    </ul>

                                                                                </div>

                                                                            </div>

                                                                        </div>

                                                                        <div>

                                                                            <div class="infiniteCarousel">

                                                                                <div class="wrapper">

                                                                                    <ul>



                                                <?php foreach ($new as $result) : ?>

                                                                                            <li><a href="<?php print $result['title_path'] ?>"><img src="<?php print $result['image'] ?>" width="87" height="66" class="rounded" title="<?php print $result['title'] ?>"></a></li>

                                                <?php endforeach; ?>

                                                                                        </ul>

                                                                                    </div>

                                                                                </div>

                                                                            </div>



                                                                        </div>



                                                                        <img src="<?php print $path; ?>/images/new_arrivals_footer.png" border="0">



                                                                        <!-- This JavaScript snippet activates those tabs -->



                                                                        <script>







                                                                                // perform JavaScript after the document is scriptable.



                                                                                $(function() {



                                                                                    // setup ul.tabs to work as tabs for each div directly under div.panes



                                                                                    $("ul.tabs").tabs("div.panes > div");



                                                                                });



                                                                        </script>



                                                                    </div>



                                                                </div>



                                                                <div id="content-right">



                                                                    <div id="most-viewed">

                                                                         <img src="<?php print $path; ?>/images/most_viewed_header.png" />

                                                                          <div class="most-viewed-content">

                                                                            <?php foreach ($most_viewed as $result) : ?>

                                                                                                <a href="<?php print $result['title_path'] ?>">

                                                                                                    <img src="<?php print $result['image'] ?>" class="rounded" width="87" height="66"/><br/><?php print $result['title'] ?>

                                                                                                </a>

                                                                            <?php endforeach; ?>

                                                                              </div>

                                                                         <img src="<?php print $path; ?>/images/most_viewed_footer.png" />

                                                                    



                                                                    </div>

                                                                                            <div id="call-us-icon"><img src="<?php print $path; ?>/images/call_us_icon.jpg"></div>



                    </div>

                </div>





                <div id="clear-both"></div>











                <div id="footer">



                    <div id="footer-top-bottom">



                        <div id="footer-menu"> <a href="#">HOME</a> &nbsp;| &nbsp;<a href="#">BUY</a>&nbsp; | &nbsp;<a href="#">TRADE-IN</a>&nbsp; | &nbsp;<a href="#">FINANCING</a>&nbsp; | &nbsp;<a href="#">SERVICES</a>&nbsp; | &nbsp;<a href="#">ABOUT US</a>&nbsp; | &nbsp;<a href="#">CONTACT US</a>&nbsp; | &nbsp;<a href="#">ARTICLES</a> </div>



                    </div>



                    <div id="footer-bottom-bottom">



                        <div class="text">&copy; 2011 AllCars.ph  All Rights Reserved</div>



                    </div>



                </div>



            </div>



        </div>



        <script type="text/javascript">

                $(window).load(function() {

                    $('#slider').nivoSlider({

                        effect:'fade', //Specify sets like: 'fold,fade,sliceDown'

                        directionNav:false, //Next & Prev

                        directionNavHide:false, //Only show on hover

                        animSpeed:600, //Slide transition speed

                        pauseTime:3500,

                        controlNavThumbs:true, //Use thumbnails for Control Nav

                        controlNavThumbsFromRel:true //Use image rel for thumbs

                    });

                })

        </script>







    </body>



</html>



